import React from 'react';
import { Route } from 'react-router-dom';
/*
  学习目标：实现路由缓存-KeepAlive组件的封装和使用

  步骤：
  1.封装KeepAlive组件
  2. 把KeepAlive挪到Switch组件外即可
  原理：路由：组价和路径的映射关系
  Switch匹配的原理：
    1.匹配到路径和组件，旧渲染组件
    2.没有匹配到就返回null，表示卸载组件

    KeepAlive的原理是：
      1.匹配到路径和组件，就渲染组件
      2.通过样式隐藏，而不卸载组件
*/
export default function KeepAlive({ path, component: Component, ...restProps }: any) {
  return (
    <Route path={path} {...restProps}>
      {(props) => {
        const { location } = props;
        // 3. 使用starsWitch替换全等比较，为/ 匹配layout能够匹配上
        const matched = location.pathname.startsWith(path);
        return (
          <div style={{ display: !matched ? 'none' : 'block' }}>
            <Component {...props} />
          </div>
        );
      }}
    </Route>
  );
}
